<template>
    <view class="invitation_container" :style="'height: ' + height">
        <view class="invitation_header">邀请美发师</view>
        <image :src="shopimgUrl + 'icon.png'" class="invitation_icon" />
        <image :src="shopimgUrl + 'abc.png'" class="invitation_comm" />
        <view class="invitation_text_area">
            <view class="invitation_title_header">
                <view class="invitation_line invitation_line_1"></view>
                <text class="invitation_text_header">邀请须知</text>
                <view class="invitation_line invitation_line_2"></view>
            </view>
            <view class="invitation_text_container">
                <view class="invitation_circle"></view>
                <text class="invitation_text">
                    【网约美发师】可以入驻多家门店(不限制入驻门店数量和地理位置），入驻申请发出后门店通过申请即可入驻成功，完成订单后马上获得相应的佣金;
                </text>
            </view>
            <view class="invitation_text_container">
                <view class="invitation_circle"></view>
                <text class="invitation_text">
                    【店内美发师】门店的全职美发师，由门店发放相应的佣金，每个收益占比：美发师只能入驻一家门店，入驻后不可在申请加入其他门店，只有与入驻门店解约后恢复申请入驻权限；
                </text>
            </view>
        </view>
        <view class="invitation_bottom">
            <view class="invitation_bottom_button invitation_bottom_button_1" @tap="invitationPlatform">邀请网约美发师</view>
            <view class="invitation_bottom_button invitation_bottom_button_2" @tap="invitationShop">邀请店内美发师</view>
        </view>

        <view class="invitation_model">
            <view class="invitation_model_container">
                <view class="invitation_model_container_header">网约美发师</view>
                <view class="invitation_model_container_content">
                    【网约美发师】可以入驻多家门店(不限制入驻门店数量和地理位置），入驻申请发出后门店通过申请即可入驻成功，完成订单后马上获得相应的佣金;
                </view>
                <view class="invitation_model_container_content">收益占比：门店占25%，美发师占60%，门店的25%包含 （水电费、场地费、大型设备使用费，不含烫染护的耗材费用）</view>
                <view class="invitation_model_container_btn_wrap">
                    <view class="invitation_model_container_btn invitation_model_container_btn_1">我在想想</view>
                    <view class="invitation_model_container_btn invitation_model_container_btn_2">确定邀请</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/invitation/index.js
const app = getApp();
export default {
    data() {
        return {
            height: '100%',
            imgUrl: app.globalData.imgUrl,
            shopimgUrl: app.globalData.shopimgUrl
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let obj = uni.getSystemInfoSync();
        this.setData({
            height: obj.windowHeight + 'px'
        });
        uni.setNavigationBarTitle({
            title: '邀请美发师'
        });
        uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#FF8A24'
        });
    },
    methods: {
        invitationPlatform: function () {
            uni.showModal({
                title: '提示',
                content: '该美发师，您已发送过申请，请等待对方同意，或联系美发师通过邀请。',
                showCancel: false,
                confirmText: '知道了',

                success(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        invitationShop: function () {
            uni.showModal({
                title: '提示',
                content: '该美发师，您已发送过申请，请等待对方同意，或联系美发师通过邀请。',
                showCancel: false,
                confirmText: '知道了',

                success(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        }
    }
};
</script>
<style>
/* pages/invitation/index.wxss */
.invitation_container {
    background-image: linear-gradient(180deg, #ff8a24, #ffb340), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
    background-repeat: no-repeat;
    position: relative;
    overflow-y: auto;
    /* height: 1200rpx; */
}
.invitation_header {
    font-family: YouSheBiaoTiHei;
    font-size: 70rpx;
    line-height: 85rpx;
    letter-spacing: 6.5rpx;
    text-align: center;
    /* background-color: #A04900; */
    color: #ffefe2;
    padding: 30rpx;
}
.invitation_icon {
    width: 70rpx;
    height: 80rpx;
    z-index: 1000;
    position: absolute;
    right: 40rpx;
    top: 136rpx;
}
.invitation_comm {
    margin: 0 auto;
    display: block;
    width: 450rpx;
}
.invitation_text_area {
    background-color: #fff;
    width: 90%;
    margin: -100rpx auto;
    height: 560rpx;
    border-radius: 10rpx;
}
.invitation_title_header {
    width: 80%;
    margin: 0 auto;
    padding: 20rpx 0;
}

.invitation_text_container {
    clear: both;
}

.invitation_circle {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    display: block;
    float: left;
    background: radial-gradient(circle, #ff8722 0, #ff8722 10%, #ff8722 30%, #fff 100%);
    border: 1rpx solid #ff8722;
    margin-left: 30rpx;
    margin-top: 10rpx;
}
.invitation_text {
    display: block;
    float: left;
    width: 80%;
    margin-bottom: 15rpx;
    font-size: 33rpx;
}
.invitation_bottom {
    margin-top: 150rpx;
}
.invitation_bottom_button {
    width: 90%;
    display: block;
    text-align: center;
    font-size: 30rpx;
    font-family: 苹方-简 中黑体;
    height: 70rpx;
    line-height: 70rpx;
    margin: 10rpx auto;
    /* border: 1px solid #fff; */
    border-radius: 50rpx;
    font-weight: 700;
}
.invitation_bottom_button_1 {
    color: #fff;
    background-color: #ff8722;
}

.invitation_bottom_button_2 {
    color: #ff8722;
    background-color: #fff;
}
.invitation_text_header {
    font-family: 苹方-简 中黑体;
    font-weight: 500;
    font-size: 50rpx;
    line-height: 50rpx;
    text-align: center;
    width: 300rpx;
    display: inline-block;
}
.invitation_line {
    height: 25rpx;
    display: inline-block;
    width: 100rpx;
    /* border: 1px solid #000; */
    background-color: #fff;
    background-image: linear-gradient(
        135deg,
        transparent 10%,
        transparent 20%,
        #ff8722 20%,
        #ff8722 30%,
        transparent 30%,
        transparent 40%,
        #ff8722 40%,
        #ff8722 50%,
        transparent 50%,
        transparent 60%,
        #ff8722 60%,
        #ff8722 70%,
        transparent 70%,
        transparent
    );
}
.invitation_line_1 {
    margin-right: -36rpx;
    margin-left: 56rpx;
}
.invitation_line_2 {
    margin-left: -36rpx;
}
.invitation_model {
    display: flex;
    bottom: 0;
}

@media screen and (max-width: 400px) {
    .invitation_header {
        font-size: 50rpx;
        padding: 15rpx;
        line-height: 50rpx;
    }
    .invitation_comm {
        width: 538rpx;
        height: 580rpx;
    }
    .invitation_text_area {
        margin: -100rpx auto;
        height: 430rpx;
    }
    .invitation_text {
        font-size: 26rpx;
    }
}

.invitation_model {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.invitation_model::before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: 1;
    content: '';
    filter: blur(2rpx);
}
.invitation_model_container {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    color: #000;
    width: 100%;
    height: 450rpx;
    z-index: 1000;
    opacity: 1;
    border-radius: 50rpx 50rpx 0 0;
}
.invitation_model_container_header {
    text-align: center;
    padding: 10rpx 0;
}
.invitation_model_container_content {
    font-size: 30rpx;
    padding: 10rpx 30rpx;
}
.invitation_model_container_btn_wrap {
    margin: 0 auto;
    width: 80%;
}
.invitation_model_container_btn {
    width: 40%;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    color: #fff;
    height: 70rpx;
    border-radius: 35rpx;
    padding: 18rpx 0;
    font-size: 30rpx;
    list-style: 50rpx;
}
.invitation_model_container_btn + .invitation_model_container_btn {
    margin-left: 20%;
}
.invitation_model_container_btn_1 {
    background-color: #999999;
}
.invitation_model_container_btn_2 {
    background-color: #ff8722;
}
</style>
